var cityCode = getHash('cityCode')
var lng = getHash('lng')
var lat = getHash('lat')
// var url = './data/' + cityCode + '/lines-bus.json'
var url = './data/' + cityCode + '/lines-bus.json'

$.get(url, function (data) {
  let lines = data
  let hStep = 300 / (lines.length - 1)
  var busLines = lines.map(function (busLine, idx) {
    return {
      coords: busLine,
      lineStyle: {
        normal: {
          color: echarts.color.modifyHSL('#5A94DF',Math.round(hStep * idx))
        }
      }
    };
  });
  // console.log(busLines.length);
  // busLines = busLines.slice(0, 100);
  // console.log(busLines.slice(0, 100))

  var options = {
    animation: false,
    bmap: {
      center: [lng, lat],
      zoom: 12,
      roam: true,
      mapStyle: {
        'styleJson': [
          {
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
              'color': '#0c0d22'
            }
          },
          {
            'featureType': 'land',
            'elementType': 'geometry',
            'stylers': {
              'color': '#000102'
            }
          },
          {
            'featureType': 'highway',
            'elementType': 'all',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
              'color': '#000000'
            }
          },
          {
            'featureType': 'arterial',
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#0b3d51'
            }
          },
          {
            'featureType': 'local',
            'elementType': 'geometry',
            'stylers': {
              'color': '#000000'
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'geometry.fill',
            'stylers': {
              'color': '#000000'
            }
          },
          {
            'featureType': 'railway',
            'elementType': 'geometry.stroke',
            'stylers': {
              'color': '#08304b'
            }
          },
          {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
              'lightness': -70
            }
          },
          {
            'featureType': 'building',
            'elementType': 'geometry.fill',
            'stylers': {
              'color': '#000000'
            }
          },
          {
            'featureType': 'all',
            'elementType': 'labels.text.fill',
            'stylers': {
              'color': '#857f7f'
            }
          },
          {
            'featureType': 'all',
            'elementType': 'labels.text.stroke',
            'stylers': {
              'color': '#000000'
            }
          },
          {
            'featureType': 'building',
            'elementType': 'geometry',
            'stylers': {
              'visibility': 'off'
            }
          },
          {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
              'color': '#062032'
            }
          },
          {
            'featureType': 'boundary',
            'elementType': 'all',
            'stylers': {
              'color': '#465b6c'
            }
          },
          {
            'featureType': 'manmade',
            'elementType': 'all',
            'stylers': {
              'color': '#022338'
            }
          },
          {
            'featureType': 'label',
            'elementType': 'all',
            'stylers': {
              'visibility': 'off'
            }
          }
        ]
      }
    },
    series: [{
      type: 'lines',
      coordinateSystem: 'bmap',
      polyline: true,
      data: busLines,
      silent: true,
      lineStyle: {
        normal: {
          // color: '#c23531',
          // color: 'rgb(200, 35, 45)',
          opacity: 0.2,
          width: 1
        }
      },
      progressiveThreshold: 500,
      progressive: 200
    }, {
      type: 'lines',
      coordinateSystem: 'bmap',
      polyline: true,
      data: busLines,
      lineStyle: {
        normal: {
          width: 0
        }
      },
      effect: {
        constantSpeed: 20,
        show: true,
        trailLength: 0.1,
        symbolSize: 1.5
      },
      zlevel: 1
    }]
  }
  const myMap = echarts.init(document.getElementById('main'))
  myMap.setOption(options, true)
  window.addEventListener('resize', function () {
    myMap.resize()
  })
})

function getHash (name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  // 构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg)
  // 匹配目标参数
  if (r != null) return decodeURIComponent(r[2])
  return null // 返回参数值
}
